<template>
  <div class="systemIndex">
    <div class="container">
      <div class="logo">
        <a class="title">
          全面风险管理系统
        </a>
        <p class="systemHeadline">
          <img src="../../static/images/log.png" alt="">
        </p>
      </div>
    </div>
    <div class="colum-list  ">
      <div class="catalogList2 container">
        <p class="breadClumn">
          <span>当前位置：</span>
          <router-link :to="{path:'/pageIndex'}">
            首页 >
          </router-link>
          <span>系统日志</span>
        </p>
      </div>
      <div class="colum-list-ul">
        <div class="container">
          <ul  >
            <li class="yellowLine">
              <router-link :to="{path:'/companyLog'}">
                <div >
                  <span>企业目录日志</span>
                </div>
              </router-link>
            </li>
            <li>
              <router-link :to="{path:'/departLog'}">
                <div>
                  <span>部门目录日志</span>
                </div>
              </router-link>
            </li>
            <li>
              <router-link :to="{path:'/progressLog'}">
                <div>
                  <span>流程目录日志</span>
                </div>
              </router-link>
            </li>
            <li>
              <router-link :to="{path:'/usersLog'}">
                <div>
                  <span>用户目录日志</span>
                </div>
              </router-link>

            </li>


          </ul>
        </div>
      </div>


    </div>
  </div>
</template>

<script>

</script>

<style scoped="">
  body,html{
    width: 100%;
    height: 100%;
  }
  #app{
    height: 100% !important;
    width: 100%;
  }
  .systemIndex{
    width: 100%;
    height: 100%;
    background: #e9ece5;
    overflow: hidden;
    background-image: url("../../static/images/otherBanner.jpg");
    background-repeat: no-repeat;
    background-position: center;
  }
  .systemIndex .logo{
    margin-top:80px;
  }
  .systemIndex .colum-list{
    /*margin-top: 108px;*/
  }
  .systemIndex .colum-list .catalog{
    width: 310px;
    height: 373px;
    background: #ffffff;
    position: relative;
    padding-top: 7px;
    border-top-right-radius: 12px;
  }
  .systemIndex .colum-list .catalog:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 100%;
    height:7px;
    background-image: url("../../static/images/category1Line.png");
    background-repeat: no-repeat;

  }
  .systemIndex .colum-list .catalog  div{
    position: absolute;
    left: 0;
    top:0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 150px;
    height: 150px;
    font-size: 26px;
    color: #666666;
    text-align: center;
  }
  .systemIndex .colum-list .catalog  div img{
    margin-bottom: 20px;
  }
  .systemIndex .catalogList2{
    /*padding: 115px 0;*/
    position: relative;
  }
  .systemIndex  .catalogList2 .breadClumn{
    /*position: absolute;*/
    /*left: 0;*/
    /*top:-50px;*/
    color:#508018;
    padding-top: 40px;
    padding-bottom: 20px;
  }
  .systemIndex  .catalogList2 .breadClumn a{
    color:#508018;
    font-size: 16px;
  }
  .systemIndex   .colum-list-ul{
    font-size: 0;
    background: rgba(196,220,168,0.4);
    padding: 30px 0;
  }
  .systemIndex  .colum-list-ul li{
    display: inline-block;
    width: 280px;
    height: 172px;
    position: relative;
    padding-top: 7px;
    background: white;
    border-top-right-radius: 12px;
    margin-right: 20px;
    vertical-align: top;

  }
  .systemIndex  .colum-list-ul li a{
    display: inline-block;
    width: 100%;
    height:100%;
  }
  .systemIndex .colum-list-ul li:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 100%;
    height: 7px;
    background: #8cc34b;
    background-position:center ;
    background-repeat: no-repeat;
  }
  .systemIndex .colum-list-ul li.yellowLine:before{
  }
  .systemIndex .colum-list-ul li div{
    margin-top: 70px;
    font-size: 24px;
    color: #666666;
    text-align: center;
    vertical-align: middle;
  }
  .systemIndex  .colum-list-ul li div span{
    vertical-align: middle;

  }
  .systemIndex .colum-list-ul li div img{
    vertical-align: middle;
  }
  .systemIndex .systemHeadline{
    text-align: center;
    padding-top: 47px;
  }
  .systemIndex .logo .title{
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    color:#444444 ;
    padding-top:20px ;
  }
  @media screen and (max-width: 1400px){
    .systemIndex .logo{
      margin-top:40px;
    }
    .systemIndex .systemHeadline{
      text-align: center;
      padding-top:27px;
    }
    .systemIndex  .catalogList2 .breadClumn{
      padding-bottom: 10px;
      padding-top: 30px;
    }
  }
</style>
